<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <style>
  .tfiles-main{
    padding: 15px;
    background-color: #f5f5f5;
    position: relative;
  }
  .tfiles-main .layui-card-header{
    color: #009688;
    font-size: 16px;
  }
  .tfiles-main .layui-card-header .layui-icon{
    margin-right: 8px;
    font-size: 16px;
  }
  .tfiles-main .layui-card-body{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .tfiles-main-l{
    width: 240px;
    height: auto;
    float: left;
  }
  .tfiles-main-r{
    padding-left: 255px;
  }
  .item-content{
    height: 32px;
    line-height: 32px;
    position: relative;
  }
  .item-name{
    width: 60px;
    text-align: right;
    float: left;
    padding-right: 15px;
    position: absolute;
    overflow: hidden;
  }
  .item-info{
    padding-left: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-info{
    text-align: center;
  }
  .user-info .layui-card-header{
    height: auto;
    padding: 30px 0 15px;
    font-size: 14px;
    color: #333;
  }
  .user-info .layui-card-header p{
    line-height: 24px;
    margin-top: 5px;
  }
  .user-img{
    width: 70px;
    height: 70px;
  }
  .user-info .layui-card-body{
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .user-info .layui-card-body span{
    padding: 0 15px;
    color: #999;
    position: relative;
  }
  .user-info .layui-card-body span:first-child:after{
    width: 1px;
    height: 10px;
    background-color: #ccc;
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -5px;
  }
  .c-info .item-name{
    width: 50px;
  }
  .c-info .item-info{
    padding-left: 65px;
  }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo"></div>
  <div class="layui-side layui-bg-black"></div>
  <!-- content start -->
  <div class="layui-body" style="padding-left: 10px;">
    <!-- *************** 分割线 ****************** -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
      <legend>老师档案</legend>
    </fieldset>
    <div class="tfiles-main layui-clear">
      <div class="tfiles-main-l">
        <div class="layui-card user-info">
          <div class="layui-card-header">
            <img src="http://file.lms.ruixinnj.com/image/user_avatar/pic008_1554278198.jpg" class="user-img" alt="">
            <p>张三</p>
          </div>
          <div class="layui-card-body">
            <span>全职</span>
            <span>level 1</span>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header"><i class="layui-icon layui-icon-username"></i>基本信息</div>
          <div class="layui-card-body">
            <div class="item-content">
              <span class="item-name">性别</span>
              <p class="item-info">男</p>
            </div>
            <div class="item-content">
              <span class="item-name">手机号</span>
              <p class="item-info">13123132224</p>
            </div>
            <div class="item-content">
              <span class="item-name">邮箱</span>
              <p class="item-info">12224@163.com</p>
            </div>
            <div class="item-content">
              <span class="item-name">微信号</span>
              <p class="item-info">13123132224</p>
            </div>
            <div class="item-content">
              <span class="item-name">注册时间</span>
              <P class="item-info">2019-04-01 15:00:53</P>
            </div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header"><i class="layui-icon layui-icon-read"></i>课程信息</div>
          <div class="layui-card-body">
            <div class="item-content">
              <span class="item-name">授课形式</span>
              <p class="item-info">线上课 直播课</p>
            </div>
            <div class="item-content">
              <span class="item-name">已授课时</span>
              <p class="item-info">40</p>
            </div>
            <div class="item-content">
              <span class="item-name">名师</span>
              <p class="item-info">否</p>
            </div>
            <div class="item-content">
              <span class="item-name">助教</span>
              <p class="item-info">否</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tfiles-main-r">
        <div class="layui-card c-info">
          <div class="layui-card-header"><i class="layui-icon layui-icon-user"></i>公司信息</div>
          <div class="layui-card-body">
            <div class="item-content">
              <span class="item-name">公司</span>
              <p class="item-info">公司名称</p>
            </div>
            <div class="item-content">
              <span class="item-name">职务</span>
              <p class="item-info">职务名称</p>
            </div>
            <div class="item-content">
              <span class="item-name">行业</span>
              <p class="item-info">行业名称</p>
            </div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header"><i class="layui-icon layui-icon-about"></i>介绍</div>
          <div class="layui-card-body">
            <div class="intro">Lorem ipsum dolor坐下来，精致的adipistur elit。Aenean euismod bibendum laoreet。Proin gravida dolor sit amet lacus accumsan et viverra justo commodo。Proin sodales pulvinar sic tempor。Sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。Nam fermentum，nulla luctus pharetra vulputate，felis tellus mollis orci，sed rhoncus pronin sapien nunc accuan eget。</div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header"><i class="layui-icon layui-icon-auz"></i>资质认证</div>
          <div class="layui-card-body">
            <div class="intro">Lorem ipsum dolor坐下来，精致的adipistur elit。Aenean euismod bibendum laoreet。Proin gravida dolor sit amet lacus accumsan et viverra justo commodo。Proin sodales pulvinar sic tempor。Sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。Nam fermentum，nulla luctus pharetra vulputate，felis tellus mollis orci，sed rhoncus pronin sapien nunc accuan eget。</div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header"><i class="layui-icon layui-icon-read"></i>老师课程</div>
          <div class="layui-card-body">
            <table id="courseInfo"></table>
          </div>
        </div>
      </div>
    </div>
    <!-- *************** 分割线 ****************** -->
  </div>
</div>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#courseInfo'
      ,height: 312
      ,url: '../data/test.json'
      ,page: true
      ,cols: [[
        {field: 'id', title: '课程ID', align: 'center'}
        ,{field: 'progress', title: '进度', align: 'center'}
        ,{field: 'progress', title: '进度', align: 'center'}
        ,{field: 'price', title: '购买金额', align: 'center'}
        ,{field: 'signTime', title: '注册时间', align: 'center', sort: true}
        ,{field: 'date', title: '完成日期', align: 'center', sort: true}
      ]]
    });
  });
</script>
</body>
</html>